<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>美食街监控 - 游乐园信息管理系统</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/components.css">
</head>

<body>
    <header class="header">
        <div class="header-container">
            <button class="mobile-menu-btn">☰</button>
            <div class="location">
                <span class="location-icon">📍</span>
                <span class="location-text">Beijing, China</span>
            </div>
            <nav class="main-nav">
                <!-- 美食街监控页面专用 - 导航项目已移除 -->
            </nav>
            <div class="user-actions">
                <a href="login.html" class="login-btn">登录使用更多功能</a>
                <a href="personal-center-monitor.html" class="user-icon">👤</a>
            </div>
        </div>
    </header>

    <aside class="sidebar">
        <div class="sidebar-header">
            <h3>项目详情</h3>
            <button class="collapse-btn" onclick="toggleSidebar()">◀</button>
        </div>
        <ul class="project-list">
            <li><a href="system-monitor.html">
                    <span class="project-icon">📊</span>
                    <span class="project-text">系统监控</span>
                </a></li>
            <li><a href="vr-cinema-monitor.html">
                    <span class="project-icon">🥽</span>
                    <span class="project-text">VR影院</span>
                </a></li>
            <li><a href="food-street-monitor.html" class="active">
                    <span class="project-icon">🍽️</span>
                    <span class="project-text">美食街</span>
                </a></li>
            <li><a href="traffic-stats.html">
                    <span class="project-icon">📈</span>
                    <span class="project-text">出入口客流统计</span>
                </a></li>
            <li><a href="personal-center-monitor.html">
                    <span class="project-icon">👤</span>
                    <span class="project-text">个人中心</span>
                </a></li>
        </ul>

        <div class="latest-notice">
            <h4>最新通知</h4>
            <div class="notice-content">
                <p>• VR影院维护完成，现已开放</p>
                <p>• 今日游客量较大，建议错峰游玩</p>
                <p>• 水上项目需预约救生衣</p>
                <p>• 夜间灯光秀今晚8点开始</p>
            </div>
        </div>
    </aside>

    <main class="main-content">
        <!-- 美食街监控 -->
        <section class="section" id="foodStreetMonitorSection">
            <h4>🍽️ 美食街监控</h4>
            
            <!-- 订单队列 -->
            <div class="monitor-section">
                <h5>📋 订单队列</h5>
                
                <!-- 川菜馆订单队列 -->
                <div class="restaurant-queue">
                    <div class="restaurant-header">
                        <h6>🌶️ 川菜馆订单队列</h6>
                        <div class="queue-counter">
                            <span class="counter-label">待处理：</span>
                            <span class="counter-value" id="sichuanOrderCount">0</span>
                            <span class="counter-total">/ 10</span>
                        </div>
                    </div>
                    <div class="order-queue-list" id="sichuanOrderQueueList">
                        <div class="order-queue-item" data-skeleton>
                            <div class="order-info">
                                <span class="order-icon">📋</span>
                                <div class="order-details">
                                    <span class="order-number">加载中...</span>
                                    <span class="customer-name">正在获取订单数据</span>
                                </div>
                            </div>
                            <div class="order-status">
                                <span class="order-time">--:--</span>
                                <span class="status-badge">处理中</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 粤菜馆订单队列 -->
                <div class="restaurant-queue">
                    <div class="restaurant-header">
                        <h6>🦆 粤菜馆订单队列</h6>
                        <div class="queue-counter">
                            <span class="counter-label">待处理：</span>
                            <span class="counter-value" id="cantonOrderCount">0</span>
                            <span class="counter-total">/ 10</span>
                        </div>
                    </div>
                    <div class="order-queue-list" id="cantonOrderQueueList">
                        <div class="order-queue-item" data-skeleton>
                            <div class="order-info">
                                <span class="order-icon">📋</span>
                                <div class="order-details">
                                    <span class="order-number">加载中...</span>
                                    <span class="customer-name">正在获取订单数据</span>
                                </div>
                            </div>
                            <div class="order-status">
                                <span class="order-time">--:--</span>
                                <span class="status-badge">处理中</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 日料店订单队列 -->
                <div class="restaurant-queue">
                    <div class="restaurant-header">
                        <h6>🍣 日料店订单队列</h6>
                        <div class="queue-counter">
                            <span class="counter-label">待处理：</span>
                            <span class="counter-value" id="japaneseOrderCount">0</span>
                            <span class="counter-total">/ 10</span>
                        </div>
                    </div>
                    <div class="order-queue-list" id="japaneseOrderQueueList">
                        <div class="order-queue-item" data-skeleton>
                            <div class="order-info">
                                <span class="order-icon">📋</span>
                                <div class="order-details">
                                    <span class="order-number">加载中...</span>
                                    <span class="customer-name">正在获取订单数据</span>
                                </div>
                            </div>
                            <div class="order-status">
                                <span class="order-time">--:--</span>
                                <span class="status-badge">处理中</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 取餐队列 -->
            <div class="monitor-section">
                <h5>🍽️ 取餐队列</h5>
                
                <!-- 川菜馆取餐队列 -->
                <div class="restaurant-queue">
                    <div class="pickup-header">
                        <h6>🌶️ 川菜馆取餐队列</h6>
                        <div class="pickup-counter">
                            <span class="counter-label">待取餐：</span>
                            <span class="counter-value" id="sichuanPickupCount">0</span>
                        </div>
                    </div>
                    <div class="pickup-queue-grid" id="sichuanPickupQueueGrid">
                        <!-- 动态显示所有待取餐订单 -->
                    </div>
                </div>

                <!-- 粤菜馆取餐队列 -->
                <div class="restaurant-queue">
                    <div class="pickup-header">
                        <h6>🦆 粤菜馆取餐队列</h6>
                        <div class="pickup-counter">
                            <span class="counter-label">待取餐：</span>
                            <span class="counter-value" id="cantonPickupCount">0</span>
                        </div>
                    </div>
                    <div class="pickup-queue-grid" id="cantonPickupQueueGrid">
                        <!-- 动态显示所有待取餐订单 -->
                    </div>
                </div>

                <!-- 日料店取餐队列 -->
                <div class="restaurant-queue">
                    <div class="pickup-header">
                        <h6>🍣 日料店取餐队列</h6>
                        <div class="pickup-counter">
                            <span class="counter-label">待取餐：</span>
                            <span class="counter-value" id="japanesePickupCount">0</span>
                        </div>
                    </div>
                    <div class="pickup-queue-grid" id="japanesePickupQueueGrid">
                        <!-- 动态显示所有待取餐订单 -->
                    </div>
                </div>
            </div>
        </section>
    </main>

    <script src="js/api-service.js"></script>
    <script src="js/main.js"></script>
    <script src="js/visitor-statistics.js"></script>
    <script src="js/food-street-monitor.js"></script>
</body>

</html>
